import React, { useState } from 'react'
import "./App.css"
import Header from "./components/Header"
import List from "./components/List"
import Footer from "./components/Footer"

import { nanoid } from 'nanoid'

export default function App() {
  //状态提升,把数组放在父组件中,所有子兄弟组件都可以使用
  const [todoList,setTodoList] = useState([
    { id: "001", todo: "唱", done: false},
    { id: "002", todo: "跳", done: false },
    { id: "003", todo: "rap", done: false },
  ])

  return (
    <div className="todo-container">
    <div className="todo-wrap">
      <Header setTodoList={setTodoList} todoList={todoList}/>
      <List todoList={todoList} setTodoList={setTodoList}/>
      <Footer />
    </div>
  </div>
  )
}


